import { CSSProperties } from "react";
import { css } from "@emotion/react";

// @ts-ignore
const large = css`
  font-size: 2em;
  color: "red";
`;

const largeStyle: CSSProperties = {
  fontSize: "2em",
  color: "red",
};

const smallStyle: CSSProperties = {
  fontSize: "0.5em",
  color: "green",
};

const styleMapper: Record<"small" | "large", CSSProperties> = {
  small: smallStyle,
  large: largeStyle,
};

type propsType = {
  type: "large" | "small";
  title: string;
};
const Title = (props: propsType) => {
  const { title, type } = props;

  return <p style={styleMapper[type]}>{title}</p>;
};

export default Title;
